import React from 'react';

interface ScrollAreaProps {
  children: React.ReactNode;
  className?: string;
}

const ScrollArea: React.FC<ScrollAreaProps> = ({ children, className = '' }) => {
  const baseClasses = 'relative overflow-hidden';
  const classes = `${baseClasses} ${className}`;

  return (
    <div className={classes}>
      <div className="absolute inset-0 overflow-y-auto">
        <div className="min-h-full pr-4">
          {children}
        </div>
      </div>
      {/* 右侧滚动条指示器样式 */}
      <style jsx global>{`
        .overflow-y-auto::-webkit-scrollbar {
          width: 6px;
        }
        .overflow-y-auto::-webkit-scrollbar-track {
          background: transparent;
        }
        .overflow-y-auto::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 3px;
        }
        .overflow-y-auto::-webkit-scrollbar-thumb:hover {
          background: #94a3b8;
        }
        .dark .overflow-y-auto::-webkit-scrollbar-thumb {
          background: #475569;
        }
        .dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
          background: #64748b;
        }
      `}</style>
    </div>
  );
};

export { ScrollArea };